﻿@inject DemoMenuMeta meta
@functions {
    string GetHljsLangClass(DemoSourceFile file) {
        var result = "";
        var name = file.Name.ToLower();

        if(name.EndsWith(".cs"))
            result = "csharp";
        else if(name.EndsWith("html"))
            result = "html";
        else if(name.EndsWith(".css"))
            result = "css";
        else if(name.EndsWith(".json"))
            result = "json";
        else if(name.EndsWith(".js"))
            result = "js";

        if(!String.IsNullOrEmpty(result))
            return "language-" + result;

        return "";
    }
}
<div class="code">
    <div id="code-tabs"></div>
    @foreach(var file in meta.CurrentDemo.Files) {
        <pre class="source-block"><code class="@(GetHljsLangClass(file))">@(file.Read())</code></pre>
    }

    <script>
        $(function() {

            function activateTab(index) {
                $(".source-block").each(function(i) {
                    var $this = $(this);
                    if(i === index) {
                        $this.addClass("active");
                        if(!$this.hasClass("hljs"))
                            hljs.highlightBlock(this);
                    } else {
                        $this.removeClass("active");
                    }
                });
            }

            activateTab(0);

            $("#code-tabs").dxTabs({
                dataSource: @Json.Serialize(meta.CurrentDemo.Files.Select(item => item.Name)),
                onItemClick: function(e) {
                    activateTab(e.itemIndex);
                },
                selectedIndex: 0
            });
        });
    </script>
</div>
